<script setup>
import { ref, onMounted } from "vue";
import TextUnderColor from "@/components/TextUnderColor.vue";
import { fetchCarousel, fetchRecommend } from "@/api/home";
import { fetchCourse } from "@/api/course";
const carousels = ref([]);
const recommendArray = ref([]);
const carouselArray = ref([]);
onMounted(() => {
  fetchCarousel().then((res) => {
    console.log(res.data.data);

    carouselArray.value = res.data.data;
  });

  fetchRecommend().then((res) => {
    console.log(res.data.data);

    recommendArray.value = res.data.data;
  });

  fetchCourse().then((res) => {
    carousels.value = res.data.data;
  });
});

const knowledges = [
  {
    id: "1",
    name: "前端",
    url: "#",
  },
  {
    id: "2",
    name: "后端",
    url: "#",
  },
  {
    id: "3",
    name: "框架",
    url: "#",
  },
  {
    id: "4",
    name: "Java",
    url: "#",
  },
];
</script>

<template>
  <div>
    <el-header>
      <div class="flex flex-center flex-between">
        <div class="flex gap-20">
          <div class="flex flex-align-center">
            <svg
              t="1732353849437"
              class="icon"
              viewBox="0 0 1060 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2226"
              width="28"
              height="28"
            >
              <path
                d="M713.1406475 613.8463025a394.39342688 394.39342688 0 0 1-90.71048812 251.71580437h-59.39101032v57.07104938a374.20976344 374.20976344 0 0 1-67.27887843 43.15128094 29.46350906 29.46350906 0 0 1-1.39197657-9.04784907v-91.63847343H66.79941969a34.79941969 34.79941969 0 0 1-34.79941969-34.79941969V509.4480425a34.79941969 34.79941969 0 0 1 34.79941969-34.79941969h426.64089v-51.73513781H242.88448531a34.3354275 34.3354275 0 0 1-23.19961312-9.04784906l-131.54180813-120.86998594a378.38569312 378.38569312 0 0 1 62.87095219-36.887385 394.39342688 394.39342688 0 0 1 463.99226719 96.27839531 366.08989875 366.08989875 0 0 1 49.18318031 69.59884032h-101.15031469v51.73513781h123.88593563a366.78588656 366.78588656 0 0 1 19.0236825 69.59883937 382.56162375 382.56162375 0 0 1 7.19188031 70.52682469z"
                fill="#FFD000"
                p-id="2227"
              ></path>
              <path
                d="M814.52295781 865.56210688H66.79941969a34.79941969 34.79941969 0 0 1-34.79941969-34.79941969V509.4480425a34.79941969 34.79941969 0 0 1 34.79941969-34.79941969h747.72353812a35.26341188 35.26341188 0 0 1 23.19961313 9.04784907l177.01305 160.77332062a34.56742406 34.56742406 0 0 1 11.36781094 25.75157062 35.26341188 35.26341188 0 0 1-11.36781094 25.75157063l-177.01305 160.54132406a35.26341188 35.26341188 0 0 1-23.19961313 9.04784907zM101.59884031 795.9632675h699.46834219l139.19767969-125.74190437-139.19767969-125.97390094H101.59884031zM991.53600781 422.913485H244.04446625a34.3354275 34.3354275 0 0 1-23.19961406-9.04784906L43.83180312 253.32431094a34.79941969 34.79941969 0 0 1-11.59980656-25.75157063 33.87143531 33.87143531 0 0 1 11.59980656-25.75157062L220.84485219 41.04784906a34.3354275 34.3354275 0 0 1 23.19961406-9.04784906h747.49154156a34.79941969 34.79941969 0 0 1 34.79941969 34.79941969v321.31464469a34.79941969 34.79941969 0 0 1-34.79941969 34.79942062z m-734.26776187-69.59884031h700.16433V101.59884031H257.26824594l-139.19768063 125.9739z"
                fill="#000000"
                p-id="2228"
              ></path>
              <path
                d="M529.16771375 992a34.79941969 34.79941969 0 0 1-34.79941969-34.79941969v-126.43789312a34.79941969 34.79941969 0 0 1 69.59883938 0v126.43789312a34.79941969 34.79941969 0 0 1-34.79941969 34.79941969zM529.16771375 544.24746219a34.79941969 34.79941969 0 0 1-34.79941969-34.79941969v-121.33397813a34.79941969 34.79941969 0 0 1 69.59883938 1e-8v121.33397812a34.79941969 34.79941969 0 0 1-34.79941969 34.79941969z"
                fill="#000000"
                p-id="2229"
              ></path>
            </svg>
            <TextUnderColor :text="'热门课程'"></TextUnderColor>
          </div>
          <div class="flex flex-center gap-10">
            <el-link
              v-for="knowledge in knowledges"
              :key="knowledge.id"
              class="header_div_link_css"
              @click="openclick(knowledge.url)"
              >{{ knowledge.name }}</el-link
            >
          </div>
        </div>
        <div>
          <el-input
            placeholder="请输入内容"
            v-model="input"
            clearable
            style="float: left; width: 250px; margin-right: 20px"
          />
          <el-button type="primary" icon="Search">搜索</el-button>
        </div>
      </div>
    </el-header>
    <div style="height: 20px"></div>
    <el-carousel :interval="4000" type="card">
      <el-carousel-item v-for="item in carouselArray" :key="item">
        <img :src="item" alt="" width="100%" height="100%" />
      </el-carousel-item>
    </el-carousel>
    <div>
      <div style="padding: 1rem" class="recommend shadow-sm">
        <div class="recommend-item" v-for="item in recommendArray">
          <div>
            <img :src="item.src" alt="" width="70px" height="70px" />
            <div class="flex flex-column gap-10">
              <div>{{ item.title }}</div>
              <p>
                <small style="color: #6b7986">{{ item.small }}</small>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="height: 20px"></div>
    <TextUnderColor
      style="margin: 1rem 0"
      :text="'精选课程'"
      :beforeColor="'#1b5ae3'"
    ></TextUnderColor>
    <div>
      <div class="gird gird-4 gap-20">
        <div
          v-for="i in carousels"
          class="p-relative"
          @click="redirectToUrl(i.url)"
        >
          <img
            style="border-radius: 20px 20px 0 0"
            :src="i.src"
            width="100%"
            class="border-radius-5"
          />
          <div class="w-100 desc" style="background-color: #fff">
            <div>
              <span class="border_left">{{ i.title }}</span>
            </div>
            <div class="desc-tent">
              {{ i.desc1 }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.item-active {
  position: relative;
  z-index: 10;
}
.desc {
  text-align: left;
  padding: 1rem;
}
.desc-tent {
  margin-top: 20px;
  font-size: small;
  font-weight: 300;
  display: -webkit-box;
  -webkit-line-clamp: 4; /* 限制最多显示 4 行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5em; /* 根据实际情况调整行高 */
  max-height: 6em; /* 根据行高和行数计算最大高度 */
}

.recommend {
  background-color: #fff;
  border-radius: 10px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.recommend-item:hover {
  color: #29a2ff;
  cursor: pointer;
}

.recommend-item > div {
  font-weight: 300;
  display: flex;
  gap: 20px;
}
</style>
